<template>
	<el-container>
		<el-header>至2月12日业务部门资金预计支出、收款以及收支差。每周五填写一次</el-header>
		<el-main class="">
			<q-form @submit="onSubmit" class="q-gutter-md">
				<q-select color="purple-12" v-model="formData.bm" :options="options" label="上报部门">
					<template v-slot:prepend>
						<q-icon name="dehaze" />
					</template>
				</q-select>
				<el-card shadow="never" header="人民币(单位：万元)" style="margin-top: 15px;">
					<div class="q-gutter-md" style="max-width: 500px">
						<q-input outlined v-model="formData.rmbf" prefix="¥" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<template v-slot:label>
								<span class="text-weight-bold text-deep-orange">人民币</span>
								预计 <span class="q-px-sm bg-deep-orange text-white text-italic rounded-borders">支出</span>
							</template>
						</q-input>
						<q-input outlined v-model="formData.rmbs" prefix="¥" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<template v-slot:label>
								<span class="text-weight-bold text-deep-orange">人民币</span>
								预计 <span class="q-px-sm bg-deep-orange text-white text-italic rounded-borders">收款</span>
							</template>
						</q-input>
						<!-- <q-input outlined v-model="formData.rmbc" prefix="¥" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<template v-slot:label>
								<span class="text-weight-bold text-deep-orange">人民币</span>
								预计 <span
									class="q-px-sm bg-deep-orange text-white text-italic rounded-borders">收支差</span>
							</template>
						</q-input> -->
					</div>
				</el-card>
				<el-card shadow="never" header="美金TT(单位：万元)" style="margin-top: 15px;">
					<div class="q-gutter-md" style="max-width: 500px">
						<q-input outlined v-model="formData.mjf" prefix="$" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<!-- <template v-slot:prepend>
							<q-avatar>
								<q-icon class="q-mr-xs" color="green" size="24px" name="mail" />
							</q-avatar>
						</template> -->
							<template v-slot:label>
								<span class="text-weight-bold text-green">美金TT</span>
								预计 <span class="q-px-sm bg-green text-white text-italic rounded-borders">支出</span>
							</template>
						</q-input>
						<q-input outlined v-model="formData.mjs" prefix="$" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<template v-slot:label>
								<span class="text-weight-bold text-green">美金TT</span>
								预计 <span class="q-px-sm bg-green text-white text-italic rounded-borders">收款</span>
							</template>
						</q-input>
						<!-- <q-input outlined v-model="formData.mjc" prefix="$" label-slot clearable lazy-rules
							:rules="[val => (val !== null && val !== '') || '请输入数据']">
							<template v-slot:label>
								<span class="text-weight-bold text-green">美金TT</span>
								预计 <span class="q-px-sm bg-green text-white text-italic rounded-borders">收支差</span>
							</template>
						</q-input> -->
					</div>

				</el-card>
				<div class="q-pl-xl">
					<q-btn color="primary" label="提交数据" type="submit" v-if="formData.id == 0" />
					<q-btn color="positive" label="更新数据" type="submit" v-if="formData.id > 0" />
				</div>

			</q-form>

		</el-main>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			formData: {
				id: 0,
				rmbs: '',
				rmbf: '',
				rmbc: 0,
				mjs: '',
				mjf: '',
				mjc: 0,
			},
			options: [
				'能源一部', '能源二部', '化工一部', '化工二部', '化工三部', '化工五部', '化工六部', '化工七部', '化工八部', '化工九部', '农林资源部', '新能源部'
			]
		}
	},
	async created() {
		this.$q.loading.show()
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userInfo = userInfo;
		var d = await this.$API.weixin.GetUserById.get(this.userInfo.userId, '108')
		var e = await this.$API.weixin.GetBmById.get(d.department[0], '108')
		this.formData.bm = e.department.name.replace(/\([^)]*\)|[\[\]]/g, '')
		if (this.userInfo.userId == 'shalq') {
			this.formData.bm = '能源一部'
		}
		if (this.userInfo.userId == 'zhouj') {
			this.formData.bm = '农林资源部'
		}
		let isMatched = this.options.some(element => element === this.formData.bm);
		//console.log(isMatched)
		if (!isMatched) {
			//没有匹配到部门
			console.log("没有匹配到部门");
			this.$q.dialog({
				title: '选择部门',
				message: '系统没有匹配到您的部门，请选择您要上报的部门名称',
				options: {
					type: 'radio',
					model: '',
					// inline: true
					items: [
						{ label: '能源一部', value: '能源一部' },
						{ label: '能源二部', value: '能源二部' },
						{ label: '化工一部', value: '化工一部' },
						{ label: '化工二部', value: '化工二部' },
						{ label: '化工三部', value: '化工三部' },
						{ label: '化工五部', value: '化工五部' },
						{ label: '化工六部', value: '化工六部' },
						{ label: '化工七部', value: '化工七部' },
						{ label: '化工八部', value: '化工八部' },
						{ label: '化工九部', value: '化工九部' },
						{ label: '农林资源部', value: '农林资源部' },
						{ label: '新能源部', value: '新能源部' }
					]
				},
				cancel: true,
				persistent: true
			}).onOk(async (data) => {
				this.formData.bm = data;
				this.formData.name = this.userInfo.userName
				var sfk = await this.$API.cw.GetSfk.get(this.formData.bm);
				console.log(sfk)
				if (sfk.id != 0) {
					this.formData.id = sfk.id
					this.formData.rmbc = sfk.rmbc
					this.formData.rmbf = sfk.rmbf
					this.formData.rmbs = sfk.rmbs
					this.formData.mjc = sfk.mjc
					this.formData.mjs = sfk.mjs
					this.formData.mjf = sfk.mjf
				}
			}).onCancel(() => {
				// console.log('Cancel')
			}).onDismiss(() => {
				// console.log('I am triggered on both OK and Cancel')
			})
		}
		this.formData.name = this.userInfo.userName
		var sfk = await this.$API.cw.GetSfk.get(this.formData.bm);
		console.log(sfk)
		if (sfk.id != 0) {
			this.formData.id = sfk.id
			this.formData.rmbc = sfk.rmbc
			this.formData.rmbf = sfk.rmbf
			this.formData.rmbs = sfk.rmbs
			this.formData.mjc = sfk.mjc
			this.formData.mjs = sfk.mjs
			this.formData.mjf = sfk.mjf
		}
		this.$q.loading.hide()
	},
	methods: {
		async onSubmit() {
			console.log(this.formData)
			this.$q.loading.show()
			var b = await this.$API.cw.Sfk.post(this.formData);
			this.$q.loading.hide()
			console.log(b)
			if (b === '上传成功') {
				this.$q.notify({
					message: b,
					color: 'primary',
					multiLine: true,
					actions: [
						{ label: 'Reply', color: 'yellow', handler: () => { /* ... */ } }
					]
				})
			} else {
				this.$q.notify({
					message: b,
					color: 'negative',
					multiLine: true,
					actions: [
						{ label: 'Reply', color: 'yellow', handler: () => { /* ... */ } }
					]
				})
			}

		}
	}
}
</script>

<style></style>
